<template>
  <div class="role-content-box">
    <!-- 头部搜索 -->
    <div class="content-head">
      <el-form ref="formRef" :model="viewData.searchFormData" :inline="true">
        <el-form-item label="员工工号">
          <el-input v-model="viewData.searchFormData.jobNumber" placeholder="请输入工号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="viewData.searchFormData.username" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="viewData.searchFormData.roleName" placeholder="请选择角色" class="file-name">
              <el-option v-for="item in userData.roleList" :key="item.roleId" :label="item.roleName" :value="item.roleName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-cascader v-model="viewData.searchFormData.deptId" :options="userData.departmentList" :props="{checkStrictly:true, value: 'deptId', label: 'deptName',emitPath:false}" clearable />
        </el-form-item>
        <el-form-item label="手机">
          <el-input v-model="viewData.searchFormData.mobile" placeholder="请输入手机"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getViewTableList">搜索</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格操作 -->
    <!-- <div class="table—operate">
        <el-button type="primary" @click="synchronousData">同步</el-button>
    </div> -->

    <!-- 表格内容 -->
    <el-table :data="viewData.dataList" style="width: 100%;margin:20px 0px" empty-text="暂无数据" border>
        <el-table-column prop="jobNumber" label="员工工号" />
        <el-table-column prop="username" label="姓名" width="90" />
        <el-table-column prop="mobile" label="手机" width="136"/>
        <el-table-column prop="email" label="企业邮箱" width="270" />
        <el-table-column prop="dataScope" label="数据范围">
          <template #default="{row}">
            {{ $filters.translate('dataScopeStatus', row.dataScope)}}
          </template>
        </el-table-column>
        <el-table-column prop="deptName" label="部门"  width="220" />
        <el-table-column prop="managerUserName" label="直属领导" />
        <el-table-column prop="ddStatus" label="员工状态">
          <template #default="{row}">
            {{ $filters.translate('employeeStatus', row.ddStatus)}}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="账号状态">
          <template #default="{row}">
            {{ $filters.translate('accountStatus', row.status)}}
          </template>
        </el-table-column>
        <el-table-column prop="hiredDate" label="入职时间" width="180" />
        <el-table-column prop="modifyTime" label="更新时间" width="180" />
        <el-table-column label="操作" fixed="right">
          <template #default="{row}">
            <el-button type="success" size="small" plain @click="editHandle(row)">修改</el-button>
          </template>
        </el-table-column>
    </el-table>
    <Pagination :show="true" @paginationHandle="paginationHandle" :total="viewData.total" />


    <!-- 新增修改弹框 -->
    <addEdit :childConfig='viewData.childConfig' :formData="viewData.formData" @upDrawerStatus="upDrawerStatusHandle" @upViewList="getViewTableList" />
  </div>
</template>


<script setup>
import {reactive, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { useRouter, onBeforeRouteUpdate} from 'vue-router'

import {userList} from '^/organization/user.js'

import addEdit from './addEdit.vue'
import Pagination from '~/Pagination/index.vue'

// 获取用户数据
const store = useStore()
const router = useRouter()
const userData = computed(() => store.getters.user)

// header 搜索
const viewData = reactive({
    searchFormData: {}, // 搜索data
    formData: {}, //用于修改
    childConfig: { 
        title: '',
        DrawerStatus: false, //弹框状态
        initFunctionName: '', // 初始化执行的函数
        confirmFunctionName: '' //执行确认按钮框调用的函数
    },
    dataList: [], //表格列表
    total: 0, //总数
    page: { //分页
        pageSize: 20,
        currentPage: 1
    }
})

// 监听路由变化
watch(() =>router.currentRoute.value.params, (params)=> {
    console.log("watch监听路由变化")
    params.deptId && (viewData.searchFormData.deptId = Number(params.deptId)) && getViewTableList()
}
, { immediate: true }
)

onBeforeRouteUpdate((to, from) => {
    console.log("路由监听", to, from)
})
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/**
 * 接口操作
 */
// 同步数据

// 获取表格数据列表
const getViewTableList = () => {
    const params = {
        ...viewData.searchFormData,
        ...viewData.page
    }
    userList(params).then(res => {
        viewData.dataList = res.rows
        viewData.total = res.total
    }, err => {
        console.log("用户列表异常", err)
    })
}
getViewTableList()


/**
 * 拉取共有下拉列表数据
 */
userData.value.roleList.length || store.dispatch('getRoleList', {pageSize: 100, currentPage: 1})
userData.value.departmentList.length || store.dispatch('getDeptList')
userData.value.userSelectList.length || store.dispatch('getUserDownList')

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

// 新增弹框对父组件处理
const upDrawerStatusHandle = (val) => {
    viewData.childConfig = { 
        title: '',
        DrawerStatus: val, //弹框状态
        initFunctionName: '', // 初始化执行的函数
        confirmFunctionName: '' //执行确认按钮框调用的函数
    }
    // 更新store的用户下拉列表数据
    store.dispatch('getUserDownList')
}

// 修改修改表格某行数据
const editHandle = (row) => {
    viewData.childConfig = { 
        title: '修改用户信息',
        DrawerStatus: true, //弹框状态
        initFunctionName: 'detailsHandleApi', // 初始化执行的函数
        confirmFunctionName: 'editHandleApi' //执行确认按钮框调用的函数
    }
    viewData.formData = row
}
// 翻页监听
const paginationHandle = (page) => {
    viewData.page = page
    getViewTableList()
}
const resetHandle = () => {
    viewData.searchFormData = {}
    getViewTableList()
}

</script>